<!--  -->
<script setup>
import SubmitBtn from '@/components/button/SubmitBtn.vue'
import TabSwitcher from '@/components/TabSwitcher.vue'
import { useRoute } from 'vue-router'
import { RouterView } from 'vue-router'
import { ref } from 'vue'

const route = useRoute()
const initOrder = ref(route.path.split('/').pop() || 'inbox')


const tabs = [
  { title: '收件箱', path: '/users/notifications/inbox', id: 'inbox' },
  { title: '成就', path: '/users/notifications/achievement', id: 'achievement' },
]

function retrieveData(tab) {
  initOrder.value = tab.id
  // TODO: 获取数据
}
</script>

<template>
  <div class="notify-layout-container">
    <h1>通知</h1>
    <div class="flex-between">
      <TabSwitcher :tabs="tabs" :active="initOrder" @on-switch-order="retrieveData"></TabSwitcher>
      <SubmitBtn>全部标记为已读</SubmitBtn>
    </div>
    <div class="splitter"></div>
    <RouterView></RouterView>
  </div>
</template>

<style scoped lang="scss">
.notify-layout-container {
  width: 60%;
}

.splitter {
  margin: 0;
}
</style>
